<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard Layout</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        background-color: #2a3b4c;
        color: #fff;
      }

      .dashboard {
        display: grid;
        grid-template-columns: 2fr 3fr 2fr;
        /* grid-template-rows: repeat(3, 1fr); */
        gap: 10px;
        padding: 20px;
      }

      .dashboard-header div:last-child {
        font-size: 16px;
        align-self: flex-end;
      }

      .dashboard-header {
        height: 80px;
        color: #fff;
        font-size: 34px;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 10px;
      }

      .sales-trend {
        background: #33475b;
        padding: 5px;
        border-radius: 8px;
      }

      h2 {
        font-size: 18px;
        margin-bottom: 10px;
      }

      .chart {
        background: #2a3b4c;
        height: 200px;
        border-radius: 8px;
      }

      .left {
        display: flex;
        flex-direction: column;
      }

      .left div {
        margin-bottom: 10px;
      }

      .left .chart {
        height: 250px;
      }

      .center .chart {
        display: flex;
        flex-direction: column;
        height: 575px;
      }
      .center .chart .top {
        flex: 1.5;
      }
      .center .chart .bottom {
        flex: 1;
      }
    </style>
  </head>

  <body>
    <div class="dashboard-header">
      <div>
        <img src="http://8.138.119.204:8081/static/img/logo1.png" alt="" />
      </div>
      <div>电商平台实时监控系统</div>
      <div>2024-12-21 17:59:20</div>
    </div>
    <div class="dashboard">
      <div class="left">
        <div class="sales-trend">
          <h2>地区销量趋势</h2>
          <div class="chart">图表占位符</div>
        </div>
        <div class="sales-trend">
          <h2>商家销售统计</h2>
          <div class="chart" id="seller">图表占位符</div>
        </div>
      </div>

      <div class="center">
        <div class="sales-trend">
          <h2>商户分布与销售排行</h2>
          <div class="chart">
            <div class="top">图表占位符</div>
            <div class="bottom" id="map">图表占位符</div>
          </div>
        </div>
      </div>
      <div class="left">
        <div class="sales-trend">
          <h2>热销商品销售金额占比统计</h2>
          <div class="chart" id="pre">图表占位符</div>
        </div>
        <div class="sales-trend">
          <h2>库存销售量</h2>
          <div class="chart" id="storage">图表占位符</div>
        </div>
      </div>
    </div>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script src="./lib/china.js"></script>
    <script>
      //1.地区销量趋势-折线图
      setInterval(saleSalary, 3000);
      saleSalary();
      async function saleSalary() {
        try {
          const datas = await axios({
            url: "http://8.138.119.204:8182/api/trend?type=map",
          });
          renderTrend(datas);
          // console.log(datas);
        } catch (err) {
          console.log(err);
        }
      }
      // 获取元素加入图表
      function renderTrend(datas) {
        const trendBox = document.querySelector(".sales-trend .chart");
        const trenddata = datas.data.data;
        // console.log(trenddata);

        //初始化图表
        const mychart = echarts.init(trendBox);
        const option = {
          color: [
            "#c23531",
            "#2f4554",
            "#61a0a8",
            "#d48265",
            "#91c7ae",
            "#749f83",
            "#ca8622",
            "#bda29a",
          ],
          title: {
            text: "地区销售趋势",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              fontSize: 10,
              color: "#fff",
            },
            top: "10%",
            data: trenddata.series.map((item) => item.name),
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              boundaryGap: false,
              data: trenddata.xAxis,
            },
          ],
          yAxis: [
            {
              splitLine: {
                show: false, // 隐藏 Y 轴辅助线
              },
              type: "value",
            },
          ],
          series: trenddata.series.map((item) => {
            // console.log(item);
            return {
              symbol: "none",
              name: item.name,
              type: "line",
              stack: "Total",
              areaStyle: {},
              emphasis: {
                focus: "series",
              },
              data: item.data,
            };
          }),
        };
        mychart.setOption(option);
        // console.log(mychart.option.series);
      }
      //2.商家销售统计
      setInterval(retailSales, 3000);
      async function retailSales() {
        try {
          const datas = await axios({
            url: " http://8.138.119.204:8182/api/seller",
          });
          // console.log(datas);

          renderSeller(datas);
        } catch (err) {
          console.log(err);
        }
      }
      function renderSeller(datas) {
        const mychart = echarts.init(
          document.querySelector(".sales-trend #seller")
        );
        const sellerData = datas.data.data;
        // console.log(sellerData);
        let random = Math.floor(Math.random() * 7);
        const newarr = sellerData.slice(random, random + 6);
        const valueData = newarr
          .map((item) => item.value)
          .sort((a, b) => a - b);
        // console.log(data);
        const option = {
          title: {
            text: "商家销售量统计",
            textStyle: {
              color: "#ccc",
            },
          },
          tooltip: {
            extraCssText: "width: 120px; max-height: 50px; overflow-y: none;",
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
            backgroundColor: "rgba(40, 44, 52,0.5)",
            textStyle: {
              fontSize: 10,
              color: "#ccc",
            },
          },
          legend: {
            right: "3%",
            textStyle: {
              fontSize: 10,
              color: "#ccc",
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            type: "category",
            data: newarr.map((v) => v.name),
          },
          series: [
            {
              color: "#51828d",
              name: "2012",
              type: "bar",
              data: valueData,
            },
          ],
        };
        mychart.setOption(option);
      }
      retailSales();
      //3.动态柱状图
      async function salesRank() {
        try {
          const datas = await axios.get("http://8.138.119.204:8182/api/rank");
          renderSalesRank(datas);
        } catch (err) {
          console.log(err);
        }
      }

      function renderSalesRank(datas) {
        const rankData = datas.data.data;
        // let index = 10; // 定义为局部变量
        // let newArr = rankData.slice(0, 10).sort((a,b)=>a-b);
        const myChart = echarts.init(document.querySelector(".bottom"));
        //把series和x轴的数据单独做成数组
        let index = 7;
        let xdata = rankData.map((item) => item.name).slice(0, index);
        let seriesData = rankData.map((item) => item.value).slice(0, index);
        const option = {
          tooltip: {},
          grid: {
            top: "10%",
            bottom: "10%",
          },
          xAxis: {
            type: "category",
            data: xdata,
            splitLine: {
              lineStyle: {
                type: "dashed",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              show: false,
            },
          },
          series: [
            {
              type: "bar",
              data: seriesData.map((item, index) => {
                return {
                  value: item,
                  itemStyle: {
                    color:
                      index < seriesData.length - 2 ? "#91cb8c" : "#116a64",
                  },
                };
              }),
            },
          ],
        };
        //创建定时器,实现动态数据
        setInterval(() => {
          index++;
          if (index >= rankData.length) {
            index = 0;
          }
          //删除第一个
          xdata.shift();
          seriesData.shift();
          //添加下一个
          xdata.push(rankData[index].name);
          seriesData.push(rankData[index].value);
          myChart.setOption(option);
        }, 3000);
        myChart.setOption(option);
      }

      // 假设 salesRank() 是调用 renderSalesRank 的函数，这里需要传入实际的数据
      salesRank();
      //4.三个饼状图
      async function shareOfAmount() {
        try {
          const datas = await axios.get(
            "http://8.138.119.204:8182/api/commodity"
          );
          renderShareOfAmount(datas);
        } catch (err) {
          console.log(err);
        }
      }
      function renderShareOfAmount(datas) {
        const myChart = echarts.init(document.querySelector("#pre"));
        const shareData = datas.data.data;
        console.log(shareData);
        const option = {
          graphic: {
            elements: [
              {
                type: "text",
                style: {
                  text: "女装",
                  fontSize: 14,
                  fill: "#ccc", // 副标题颜色
                },
                left: "15%",
                bottom: "20%",
              },
              {
                type: "text",
                style: {
                  text: "手机数码",
                  fontSize: 14,
                  fill: "#ccc", // 第三个小标题颜色
                },
                left: "45%",
                bottom: "20%",
              },
              {
                type: "text",
                style: {
                  text: "美妆护肤",
                  fontSize: 14,

                  fill: "#ccc", // 第三个小标题颜色
                },
                left: "75%",
                bottom: "20%",
              },
            ],
          },
          title: {
            text: "热销商品销售金额占比统计",
            textStyle: {
              color: "#ccc",
              fontSize: 14,
            },
            left: "",
          },
          tooltip: {
            trigger: "item",
          },

          series: [
            {
              label: {
                show: true,
                textStyle: { fontSize: 10, color: "#ccc" },
              },
              labelLine: {
                show: true,
                length: 5, // 第一段线的长度
                length2: 10, // 第二段线的长度
              },

              name: "女装",
              type: "pie",
              radius: "30%",
              center: ["20%", "50%"],
              data: shareData[0].children,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
            {
              label: {
                show: true,
                textStyle: { fontSize: 10, color: "#ccc" },
              },
              labelLine: {
                show: true,
                length: 5, // 第一段线的长度
                length2: 10, // 第二段线的长度
              },
              name: "手机数码",
              type: "pie",
              radius: "30%",
              center: ["50%", "50%"],
              data: shareData[1].children,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
            {
              label: {
                show: true,
                textStyle: { fontSize: 10, color: "#ccc" },
              },
              labelLine: {
                show: true,
                length: 5, // 第一段线的长度
                length2: 10, // 第二段线的长度
              },
              name: "美妆护肤",
              type: "pie",
              radius: "30%",
              center: ["80%", "50%"],
              data: shareData[2].children,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      }
      shareOfAmount();
      //仪表盘
      async function dashboard() {
        try {
          const datas = await axios.get("http://8.138.119.204:8182/api/stock");
          renderDashboard(datas);
        } catch (err) {
          console.log(err);
        }
      }
      function renderDashboard(datas) {
        const myChart = echarts.init(document.querySelector("#storage"));
        const dashboardData = datas.data.data;
        // console.log(dashboardData);
        let data = dashboardData.map((item) => {
          return { name: item.name, value: item.sales };
        });
        // console.log(data);

        const option = {
          series: [
            {
              min: 0,
              max: dashboardData[0].stock,
              radius: "55%",
              center: ["25%", "33%"],
              //标题
              title: {
                // text:'打底裤',
                offsetCenter: ["0", "-46%"],
              },
              type: "gauge",

              axisLine: {
                lineStyle: {
                  width: 5,
                  color: [
                    [0.2, "#91CA8C"],
                    [0.8, "#37a2da"],
                    [1, "#fd666d"],
                  ],
                },
              },
              //指针的长度和宽度
              pointer: {
                length: "70%",
                width: 5,
                itemStyle: {
                  color: "auto",
                },
              },

              axisTick: {
                distance: -2,
                length: 5,
                lineStyle: {
                  color: "#759AA0",
                  width: 2,
                },
              },
              splitLine: {
                distance: -2,
                length: 10,
                lineStyle: {
                  color: "#759AA0",
                  width: 4,
                },
              },

              axisLabel: {
                color: "inherit",
                distance: 10,
                fontSize: 10,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}",
                fontSize: 15,
                color: "inherit",
              },
              data: [data[0]],
            },
            {
              min: 0,
              max: dashboardData[1].stock,
              radius: "55%",
              center: ["50%", "33%"],
              title: {
                offsetCenter: ["0", "-46%"],
              },
              type: "gauge",
              axisLine: {
                lineStyle: {
                  width: 5,
                  color: [
                    [0.2, "#91CA8C"],
                    [0.8, "#37a2da"],
                    [1, "#fd666d"],
                  ],
                },
              },
              pointer: {
                length: "70%",
                width: 5,
                itemStyle: {
                  color: "auto",
                },
              },
              axisTick: {
                distance: -2,
                length: 5,
                lineStyle: {
                  color: "#759AA0",
                  width: 2,
                },
              },
              splitLine: {
                distance: -2,
                length: 10,
                lineStyle: {
                  color: "#759AA0",
                  width: 4,
                },
              },

              axisLabel: {
                color: "inherit",
                distance: 10,
                fontSize: 10,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}",
                fontSize: 15,
                color: "inherit",
              },
              data: [data[1]],
            },
            {
              min: 0,
              max: dashboardData[2].stock,
              radius: "55%",
              center: ["75%", "33%"],
              title: {
                offsetCenter: ["0", "-46%"],
              },
              type: "gauge",
              axisLine: {
                lineStyle: {
                  width: 5,
                  color: [
                    [0.2, "#91CA8C"],
                    [0.8, "#37a2da"],
                    [1, "#fd666d"],
                  ],
                },
              },
              pointer: {
                length: "70%",
                width: 5,
                itemStyle: {
                  color: "auto",
                },
              },
              axisTick: {
                distance: -2,
                length: 5,
                lineStyle: {
                  color: "#759AA0",
                  width: 2,
                },
              },
              splitLine: {
                distance: -2,
                length: 10,
                lineStyle: {
                  color: "#759AA0",
                  width: 4,
                },
              },

              axisLabel: {
                color: "inherit",
                distance: 10,
                fontSize: 10,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}",
                fontSize: 15,
                color: "inherit",
              },
              data: [data[2]],
            },
            {
              min: 0,
              max: dashboardData[3].stock,
              radius: "55%",
              center: ["40%", "80%"],
              title: {
                offsetCenter: ["0", "-46%"],
              },
              type: "gauge",
              axisLine: {
                lineStyle: {
                  width: 5,
                  color: [
                    [0.2, "#91CA8C"],
                    [0.8, "#37a2da"],
                    [1, "#fd666d"],
                  ],
                },
              },
              pointer: {
                length: "70%",
                width: 5,
                itemStyle: {
                  color: "auto",
                },
              },
              axisTick: {
                distance: -2,
                length: 5,
                lineStyle: {
                  color: "#759AA0",
                  width: 2,
                },
              },
              splitLine: {
                distance: -2,
                length: 10,
                lineStyle: {
                  color: "#759AA0",
                  width: 4,
                },
              },

              axisLabel: {
                color: "inherit",
                distance: 10,
                fontSize: 10,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}",
                fontSize: 15,
                color: "inherit",
              },
              data: [data[3]],
            },
            {
              min: 0,
              max: dashboardData[4].stock,
              radius: "55%",
              center: ["65%", "80%"],
              title: {
                offsetCenter: ["0", "-46%"],
              },
              type: "gauge",
              axisLine: {
                lineStyle: {
                  width: 5,
                  color: [
                    [0.2, "#91CA8C"],
                    [0.8, "#37a2da"],
                    [1, "#fd666d"],
                  ],
                },
              },
              pointer: {
                length: "70%",
                width: 5,
                itemStyle: {
                  color: "auto",
                },
              },
              axisTick: {
                distance: -2,
                length: 5,
                lineStyle: {
                  color: "#759AA0",
                  width: 2,
                },
              },
              splitLine: {
                distance: -2,
                length: 10,
                lineStyle: {
                  color: "#759AA0",
                  width: 4,
                },
              },

              axisLabel: {
                color: "inherit",
                distance: 10,
                fontSize: 10,
              },
              detail: {
                valueAnimation: true,
                formatter: "{value}",
                fontSize: 15,
                color: "inherit",
              },
              data: [data[4]],
            },
          ],
        };
        myChart.setOption(option);
      }
      dashboard();
      //地图

      //   async function mapData(){
      //     try{
      //         const datas = await axios.get('http://8.138.119.204:8182/api/points')
      //         renderMap(datas)
      //     }catch(err){
      //         console.log(err);
      //     }
      //   }
      function renderMap() {
        const myChart = echarts.init(document.querySelector(".top"));
        // const mapData = datas.data.data
        // console.log(mapData);
        const dataList = [
          { name: "南海诸岛", value: 0 },
          { name: "北京", value: 0 },
          { name: "天津", value: 0 },
          { name: "上海", value: 0 },
          { name: "重庆", value: 0 },
          { name: "河北", value: 0 },
          { name: "河南", value: 0 },
          { name: "云南", value: 0 },
          { name: "辽宁", value: 0 },
          { name: "黑龙江", value: 0 },
          { name: "湖南", value: 0 },
          { name: "安徽", value: 0 },
          { name: "山东", value: 0 },
          { name: "新疆", value: 0 },
          { name: "江苏", value: 0 },
          { name: "浙江", value: 0 },
          { name: "江西", value: 0 },
          { name: "湖北", value: 0 },
          { name: "广西", value: 0 },
          { name: "甘肃", value: 0 },
          { name: "山西", value: 0 },
          { name: "内蒙古", value: 0 },
          { name: "陕西", value: 0 },
          { name: "吉林", value: 0 },
          { name: "福建", value: 0 },
          { name: "贵州", value: 0 },
          { name: "广东", value: 0 },
          { name: "青海", value: 0 },
          { name: "西藏", value: 0 },
          { name: "四川", value: 0 },
          { name: "宁夏", value: 0 },
          { name: "海南", value: 0 },
          { name: "台湾", value: 0 },
          { name: "香港", value: 0 },
          { name: "澳门", value: 0 },
        ];

        const option = {
          title: {
            text: "籍贯分布",
            top: 10,
            left: 10,
            textStyle: {
              fontSize: 16,
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{b}: {c} 位学员",
            borderColor: "transparent",
            backgroundColor: "rgba(0,0,0,0.5)",
            textStyle: {
              color: "#fff",
            },
          },
          visualMap: {
            min: 0,
            max: 6,
            left: "left",
            bottom: "20",
            text: ["6", "0"],
            inRange: {
              color: ["#51828d                                                                                                    ", "#0075F0"],
            },
            show: true,
            left: 40,
          },
          geo: {
            map: "china",
            roam: false,
            zoom: 1.0,
            label: {
              normal: {
                show: true,
                fontSize: "10",
                color: "rgba(0,0,0,0.7)",
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgba(0, 0, 0, 0.2)",
                color: "#e0ffff",
              },
              emphasis: {
                areaColor: "#34D39A",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
          series: [
            {
              name: "籍贯分布",
              type: "map",
              geoIndex: 0,
              data: dataList,
            },
          ],
        };
        myChart.setOption(option);
      }
      renderMap();
    </script>
  </body>
</html>
